.tabs {
    & ul {
        display: flex;
        border-bottom: 1px solid gray(219);
    }

    & li {
        padding: .5em 2em;
        list-style: none;
        text-align: center;
        margin-bottom: -1px;

        &:hover {
            border-bottom: 1px solid gray(74);
        }
        & a {
            color: gray(74);
        }

        &.is-active {
            border-bottom: 1px solid #3273dc;
            & a {
                color: #3273dc;
            }
        }
    }

    &.is-boxed {
        & li.is-active {
            border: 1px solid gray(219);
            border-bottom-color: transparent !important;
            background-color: white;
        }
    }
}
